<!--
 * @Author: your name
 * @Date: 2021-01-11 19:44:29
 * @LastEditTime: 2021-01-11 19:58:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\components\tabs\index.vue
-->
<template>
  <view class="tabs">
    <view
      class="item"
      :class="{active:activeIndex===index?'active':''}"
      @tap="changeActive(index)"
      v-for="(item,index) in tabsList"
      :key="item.id"
    >
      <!-- 使用具名插槽 需要在js文件中声明 -->
      <slot name="before"></slot>
      {{ item.text }}
      <slot name="after"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabsList: {
      type: Array,
      value: [],
    },
  },
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    changeActive(index) {
        this.activeIndex=index
        this.$emit("change",index)
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  height: 88rpx;
  align-items: center;
  justify-content: space-evenly;
}

.tabs .item {
  line-height: 88rpx;
  width: 184rpx;
  text-align: center;
  border-bottom: 3rpx solid transparent;
}

.item.active {
  border-bottom: 3rpx solid #f00;
  font-weight: 700;
}
</style>